<template>
    <view class="delicacies">
        <uv-navbar
            :title="title"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
        ></uv-navbar>
        <view class="cooperation-search">
            <view class="cooperation-top">
                <uv-search
                    placeholder="请输入搜索内容"
                    v-model="keyword"
                    @search="search"
                    @custom="search"
                ></uv-search>
            </view>
        </view>
        <view class="tabs">
            <uv-tabs
                :list="list"
                @click="click"
                :activeStyle="{ color: '#057748' }"
                :lineColor="'#057748'"
            ></uv-tabs>
        </view>
        <view class="cart">
            <view class="cart-list">
                <goodsList style="width: 100%" :goodsList="getlist"></goodsList>
            </view>
            <u-loadmore :status="status" />
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            list: [],
            Text: "初爱热情，尽享巴西美味与美酒",
            type: "",
            category_id: "",
            getlist: [],
            title: "",
            keyword: "",
            pid: "",
            page: 1,
            status: "nomore",
        };
    },
    // 触底加载
    onReachBottom() {
        if (this.status == "nomore") return;
        this.status = "loading";
        this.page += 1;
        this.Foodlist();
    },
    onLoad(e) {
        console.log(e);

        this.pid = e.pid;
        if (e.pid == 10) {
            this.Foodation(e.pid);
            this.title = "设备租用";
        } else if (e.pid == 11) {
            this.Foodation(e.pid);
            this.title = "旅游住宿";
        } else if (e.pid == 12) {
            this.Foodation(e.pid);
            this.title = "游乐场所";
        } else if (e.pid == 13) {
            this.Foodation(e.pid);
            this.title = "景点景观";
        } else if (e.pid == 14) {
            this.Foodation(e.pid);
            this.title = "景点门票";
        } else if (e.pid == 15) {
            this.Foodation(e.pid);
            this.title = "餐饮美食";
        } else if (e.pid == 104) {
            this.Foodation(e.pid);
            this.title = "优选食品";
        } else if (e.pid == 20) {
            this.Foodation(e.pid);
            this.title = "种植食品";
        } else if (this.pid == 21) {
            this.Foodation(e.pid);
            this.title = "养殖食品";
        }
    },
    onShow() {},
    methods: {
        click(item) {
            this.getlist = [];
            this.type = item.type;
            this.category_id = item.id;
            this.Foodlist(this.type, this.category_id);
        },
        // 餐品详情
        Godetail(id) {
            if (this.pid == 11 && this.pid == 14) {
                uni.navigateTo({
                    url:
                        "/dabai/pages/caterDetails/caterDetails?id=" +
                        id +
                        "&pid=" +
                        this.pid,
                });
            } else {
                uni.navigateTo({
                    url: "/pages/product/goods?id=" + id,
                });
            }
        }, // 搜索
        search() {
            this.Foodlist();
        },
        leftClick() {
            uni.navigateBack({
                delta: 1,
            });
        },
        // 美食商品分类接口
        async Foodation(pid) {
            await this.$request
                .post("api/wanlshop.product/cate", {
                    pid: pid,
                })
                .then((res) => {
                    res.data.data.unshift({
                        pid: 0,
                        name: "全部",
                        id: res.data.data[0].pid,
                        type: "goods",
                    });
                    this.list = res.data.data;
                    this.type = this.list[0].type;
                    this.category_id = this.list[0].id;
                    this.Foodlist(this.type, this.category_id);
                });
        },

        // 美食分类列表下的商品
        async Foodlist() {
            await this.$request
                .get("api/wanlshop.product/lists", {
                    type: this.type,
                    category_id: this.category_id,
                    keywords: this.keyword,
                    page: this.page,
                })
                .then((res) => {
                    if (res.data.data.length < 15) {
                        this.status = "nomore";
                    } else {
                        this.status = "loadmore";
                    }
                    this.getlist = this.getlist.concat(res.data.data);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.uv-search__action {
    background: linear-gradient(to right, #00a579, #057849);
    padding: 14rpx 30rpx;
    border-radius: 30rpx;
    margin-right: 4rpx;
    color: #fff !important;
    width: 140rpx !important;
}

/deep/.cooperation-top {
    background-color: #f6f6f6 !important;
}

// /deep/.uv-icon__icon {
// 	font-size: 0 !important;
// }

/deep/.uv-tabs__wrapper__nav__item {
    padding: 0 42rpx !important;
}

.delicacies {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        #d3f1de 0%,
        #f4f6f5 30%,
        #f6f6f6 100%
    );
    padding-top: 180rpx;

    .cooperation-search {
        width: 94vw;
        margin: 0rpx 3vw;
        padding-top: 20rpx;

        .cooperation-top {
            background-color: #fff;
            border-radius: 30rpx;
        }
    }

    .tabs {
        margin: 0 20rpx;
    }

    .cart {
        padding: 20rpx;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        .cart-list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .cart-item {
                width: 344rpx;
                height: 542rpx;
                background-color: #fff;
                border-radius: 16rpx;
                overflow: hidden;
                margin-bottom: 18rpx;

                image {
                    width: 100%;
                    height: 344rpx;
                }

                .cart-title {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #121212;
                    line-height: 36rpx;
                    margin-top: 18rpx;
                    margin-left: 26rpx;
                }

                .cart-text {
                    margin-top: 22rpx;
                    margin-left: 26rpx;
                    display: flex;
                    align-items: center;
                    height: 30rpx;

                    .cart-price {
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 30rpx;
                        color: #eb5c20;
                        padding: 0 20rpx 0 0;
                    }

                    .cart-vip {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #eb5c20;
                        border-left: 1rpx solid #eb5c20;
                        padding: 0 10rpx;
                        height: 20rpx;
                    }
                }

                .cart-integration {
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #999999;
                    margin: 22rpx 0 0 26rpx;
                }

                .cart-shop {
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 48rpx;
                    margin-left: 26rpx;
                }
            }
        }
    }
}
</style>
